<template>
    <div class="white-box" v-if="whiteList">
      <el-divider content-position="left">白名单</el-divider>
      <el-button type="primary" @click="setWhite">{{isChangeWhite?'提交':'设置'}}</el-button>
      <el-button type="primary" v-if="isChangeWhite" @click="setAddWhite">新增</el-button>
      <el-input v-for="(w,index) in whiteList" :key="index" class="white-input" placeholder="请输入内容" v-model="whiteList[index]" :disabled="!isChangeWhite"></el-input>
    </div>
</template>

<script>
    export default {
      name: "whiteList",
      data(){
          return{
            whiteList:[],
            isChangeWhite:false//是否修改白名单
          }
      },
      created(){
        this.getWhiteList();
      },
      methods:{
        //获取白名单列表
        getWhiteList(){
          this.$axios.getBip().then((res)=>{
            let list = res.data.split(',');
            this.whiteList = list;
          })
        },
        //修改白名单
        setWhite(){
          this.isChangeWhite = !this.isChangeWhite;
          if(!this.isChangeWhite){
            let list = this.whiteList.filter(s=>{
              return s;
            })
            this.$axios.setNewBip({
              "bip":list.join(',')
            }).then((res)=>{
              if (res.data.code==='0'){
                this.$message.success('白名单设置成功！');
                this.getWhiteList();
              } else {
                this.$message.error('服务器错误！');
              }
            }).catch((err)=>{
              this.$message.error('网络错误' + err);
            })
          }
        },
        //新增白名单框
        setAddWhite(){
          this.whiteList.push('');
        }
      }
    }
</script>

<style scoped lang="scss">
.white-box{
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 30px;
  .white-input{
    max-width: 350px;
    display: block;
    margin-top: 10px;
  }
}
</style>
